<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <table>
        <tr>
            <td colspan="4">
                <input id="output" type="text" disabled>
            </td>
        </tr>
        <tr>
            <td><button id="%" >%</button></td>
            <td><button id="CE" >CE</button></td>
            <td><button id="C" >C</button></td>
            <td><button id="/" >÷</button></td>
        </tr>
        <tr>
            <td><button id="7" >7</button></td>
            <td><button id="8" >8</button></td>
            <td><button id="9" >9</button></td>
            <td><button id="+" >+</button></td>
        </tr>
        <tr>
            <td><button id="4" >4</button></td>
            <td><button id="5" >5</button></td>
            <td><button id="6" >6</button></td>
            <td><button id="-" >-</button></td>
        </tr>
        <tr>
            <td><button id="1" >1</button></td>
            <td><button id="2" >2</button></td>
            <td><button id="3" >3</button></td>
            <td><button id="*" >x</button></td>
        </tr>
        <tr>
            <td><button id="." >.</button></td>
            <td><button id="0" >0</button></td>
            <td colspan="2"><button style="width: 160px;" id="=" >=</button></td>
        </tr>
    </table>
</body>
<script>
    window.onload=function(){
        var arr =document.getElementsByTagName('button')
        for (let i = 0; i < arr.length; i++) {
            var output=document.getElementById('output')
            arr[i].onclick=function(){
                var str=RegExp(/=/)
                if(output.value.match(str) || this.id=='C'){
                    output.value=''
                    return
                }
                if(this.id=='='){
                    output.value=eval(output.value)
                    return
                }
                output.value+=this.id
            }
        }
    }
</script>
</html>